<template>
  <div class="container">
    <table>
      <tbody>
        <tr v-if="theadList.length > 0">
          <td v-for="(item, index) in theadList" :key="index" style="color: #666666">
            {{ item }}
          </td>
        </tr>
        <tr v-for="(item, index) in data" :key="index">
          <td v-if="showSerialNumber">{{ index + 1 }}</td>
          <td v-for="(obj, key) in item" :key="key" :style="obj.style" :rowspan="obj.rowspan">
            {{ obj.val }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  props: {
    showThead: {
      type: Boolean,
      default: false,
    },
    theadList: {
      type: Array,
      default: [],
    },
    showSerialNumber: {
      type: Boolean,
      default: false,
    },
    height: {
      type: String,
      default: "22vh",
    },
    data: {
      type: Array,
      default: [],
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  overflow-y: scroll;
  flex-grow: 1;
}

.container::-webkit-scrollbar {
  display: none;
}

table {
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px 8px 8px 8px;
  width: 100%;
  height: 100%;

  td,
  th {
    padding: 0 20px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    text-align: center;
    color: #333333;
    font-size: 16px;
  }

  th {
    font-size: 16px;
    color: #666666;
  }

  .orange {
    color: #ff7830;
  }
}
</style>
